<template>
  <div>
      <div class="main">
          <div class="door_img_box" v-if="details.store_facade != '' && details.store_facade != 'https://f.01nnt.com'">
              <img :src="details.store_facade" alt="">
          </div>
          <div class="door_img_box" v-else>
              <img :src="details.ad_images" alt="">
          </div>
          <div class="logo_box" :class="{nodoorimg : details.store_facade}">
              <img :src="details.store_logo" alt="">
          </div>
          <h3 class="title_h3">{{details.title}}</h3>
          <p class="author_p" v-if="details.author">作者：{{details.author}}</p>
          <div class="conter" v-html="details.content">
              <!-- <div ></div> -->
          </div>
          <div class="item_follow">
              <item-follow :storedata="details.coupon_list"></item-follow>
          </div>

          <div class="foot" :class="{foot_status : pinglun_status}">
              <div class="fl_box">
                  <div class="input_box">
                      <cube-input
                          v-model="pinglun.value"
                          :placeholder="pinglun.placeholder"
                          :type="pinglun.type"
                          :maxlength="pinglun.maxlength"
                          :readonly="pinglun.readonly"
                          :disabled="pinglun.disabled"
                          :autofocus="pinglun.autofocus"
                          :autocomplete="pinglun.autocomplete"
                          @focus="pinglunfocus"
                          @blur="pinglunblur"
                          class="input_classbusin"
                        ></cube-input>
                  </div>
                  <div class="right_default" v-if="!pinglun_status">
                      <router-link tag="div" :to="{ path: 'businesscomment', query: {poster_id:details.id} }" class="item" >
                            <i class="word_talk_icon" :style="word_talk_icon"></i>
                            <span class="num" v-if="details.comment_num">{{details.comment_num}}</span>
                      </router-link>
                      <div class="item" @click="ben_good()">
                          <i class="icon_good_icon" :style="icon_good_icon"></i>
                          <span class="num" v-if="details.praise_num">{{details.praise_num}}</span>
                      </div>
                      <div class="item" @click="is_share_mark()">
                            <i class="share_talk_icon" :style="share_talk_icon"></i>
                            <span class="num" v-if="details.collection_num">{{details.collection_num}}</span>
                      </div>
                  </div>
                  <div class="right_action" v-else>
                      <a href="javascript:;" v-if="!btn_pinglun_status" @click="btn_comment()">发布</a>
                      <a href="javascript:;" v-else>发布中..</a>
                  </div>
              </div>
          </div>
      </div>
      <div class="cezhao" v-if="is_mark" @click="is_share_mark()">
          <img :src="share_mark" alt="">
      </div>
  </div>
</template>
<script>
import share_mark from '@/assets/share_mark.png'
import wx from 'weixin-js-sdk';
import itemFollow from '@/components/ShopDetailsItemFlollow'
export default {
    data(){
        return{
            icon_good_icon:{
                backgroundImage: "url(" + require("../../assets/icon_good@2x.png") + ")",
                backgroundRepeat: "no-repeat",
                backgroundSize: "cover"
            },
            word_talk_icon:{
                backgroundImage: "url(" + require("../../assets/icon_word_talk@2x.png") + ")",
                backgroundRepeat: "no-repeat",
                backgroundSize: "cover"
            },
            share_talk_icon:{
                backgroundImage: "url(" + require("../../assets/icon_share_talk@2x.png") + ")",
                backgroundRepeat: "no-repeat",
                backgroundSize: "cover"
            },
            flollow_bg:{
                backgroundImage: "url(" + require("../../assets/banner_mini_02@2x.png") + ")",
                backgroundRepeat: "no-repeat",
                backgroundSize: "cover"
            },
            pinglun:{
                value: '',
                placeholder: '写一个评论..',
                type: 'text',
                readonly: false,
                maxlength: 250,
                disabled: false,
                autofocus: false,
                autocomplete: false
            },
            pinglun_status:false,
            btn_pinglun_status:false,
            details:"",
            share_mark:share_mark,
            is_mark:false,
            title:"文章详情"
        }
    },
    metaInfo(){
        return {
          title: this.title
        }
     },
    methods:{
        pinglunfocus:function(){
            this.pinglun_status = true;
        },
        pinglunblur:function(){
            this.pinglun_status = false;
        },
        showClose() {
          this.$createDialog({
            type: 'alert',
            icon: 'cubeic-back',
            showClose: true,
            title: '没找到ID',
            onClose: () => {

            }
          }).show()
        },
        is_share_mark(){
            this.is_mark = !this.is_mark;
        },
        ben_good:function(){
            let that = this;
            let url = "/fang/tool/add_praise";
            let _token01 = that.$store.state._token01;
            let poster_id = that.$route.query.poster_id;
            //后端返回_user_mark，存在证明没有注册手机号码
            let _user_mark = that.$store.state._user_mark;
            if(_user_mark){
                let content = "需要注册才能评论,去注册";
                that.createDialog(content);
                return;
            }
            if(that.good_status){
                  let content = "您已经点过赞啦";
                  that.showToastTxtOnly(content);
                  return;
            }
            const toast = that.$createToast({
                time: 5000,
                txt: ''
              })
              toast.show()
            that.$axios.post(url,this.$qs.stringify({
                poster_id:poster_id,
                access_token:_token01
            })).then(function(response){
                 toast.hide();
                let res = response.data;
                console.log(res,"res");
                if(res.status == 1){
                    that.good_status = true;
                    that.details.praise_num = parseInt(that.details.praise_num) +1;
                    let content = "点赞+1~";
                    that.showToastTxtOnly(content);
                }
                else if (res.status == -1) {
                    that.noLogin();
                }else{
                    let content = res.msg;
                    that.showToastTxtOnly(content);
                }
            })
            .catch(function(error){
                toast.hide();
            });
        },
        getBusiness:function(){
            let that = this;
            let poster_id = that.$route.query.poster_id;
            if(!poster_id){
                that.showClose();
            }{
                that.$axios.post("/fang/tool/get_poster_info",that.$qs.stringify({
                          poster_id:poster_id
                    }))
                    .then(function (response) {
                        let res = response.data;
                        if(res.status == 1){
                            that.details = res.data;
                            that.title=res.data.store_name;
                        }else{
                            console.log("出错了")
                        }
                    })
                    .catch(function (error) {
                      console.log(error);
                });
            }

        },
        btn_comment:function(){
            let that = this;
            let url = "/fang/tool/add_comment";
            let _token01 = that.$store.state._token01;
            let poster_id = that.$route.query.poster_id;
            //后端返回_user_mark，存在证明没有注册手机号码
            let _user_mark = that.$store.state._user_mark;
            if(_user_mark){
                let content = "需要注册才能评论,去注册";
                that.createDialog(content);
                return;
            }
            let comment_txt = that.pinglun.value;
            if(!comment_txt){
                  let content = "评论不能为空";
                  that.showToastTxtOnly(content);
                  return;
            }
            that.pinglun_status = true;
            that.btn_pinglun_status = true;

            const toast = that.$createToast({
                time: 5000,
                txt: ''
              })
              toast.show()
            that.$axios.post(url,this.$qs.stringify({
                content:comment_txt,
                poster_id:poster_id,
                access_token:_token01
            })).then(function(response){
                 toast.hide();
                 that.pinglun_status = false;
                 that.btn_pinglun_status = false;
                let res = response.data;
                console.log(res,"res");
                if(res.status == 1){
                    that.pinglun.value = "";
                    let content = "评论成功~";
                    that.showToastTxtOnly(content);
                }
                else if (res.status == -1) {
                    that.noLogin();
                }else{
                    let content = res.msg;
                    that.showToastTxtOnly(content);
                }
            })
            .catch(function(error){
                toast.hide();
                that.pinglun_status = false;
                that.btn_pinglun_status = false;
            });
        },
        binzeronefun:function(){
            this.$router.push("/binzerone");
        },
        showToastTxtOnly(text) {
         this.toast = this.$createToast({
           txt: text,
           type: 'txt'
         })
         this.toast.show()
       },
        createDialog(content){
            this.$createDialog({
               type: 'confirm',
               icon: 'cubeic-alert',
               title: '提示信息',
               content: content,
               confirmBtn: {
                 text: '确定',
                 active: true,
                 disabled: false,
                 href: 'javascript:;'
               },
               cancelBtn: {
                 text: '取消',
                 active: false,
                 disabled: false,
                 href: 'javascript:;'
               },
               onConfirm: () => {
                   this.binzeronefun()
               },
               onCancel: () => {

               }
             }).show()
        },
   },
   mounted(){

   },
   components:{
       itemFollow
   },
   computed: {
       getWindowHeight(){
         return document.documentElement.clientHeight || document.body.clientHeight;
       },
   },
   beforeCreate:function(){

   },
   activated:function(){
       //使用keep-alive以后进入页面只会触发activated
        this.getBusiness();
   },
   beforeDestroy: function() {

   },
   deactivated:function(){
       //deactivated使用keep-alive以后推出页面只会触发deactivated
       this.good_status = false;
   }
}
</script>
<style scoped>
.main{
    padding: 0 0 2.54rem 0;
}
.main .door_img_box{
    /* width: 13.8rem; */
    max-height: 9.2rem;
    /* text-align:center;
      display: table-cell;
      vertical-align: middle; */
          width: 100%;
}
.main .door_img_box img{
    max-width: 100%;
    max-height: 8rem;
    vertical-align: middle;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.main .logo_box{
    width: 11.58rem;
    height: 4.42rem;
    margin: 0 auto;
}
.main .nodoorimg{
    margin-top: -3rem;
}
.main .logo_box img{
    width: 4.36rem;
    height: 4.36rem;
    margin: 0 auto;
    border-radius: 50%;
}
.main .title_h3{
    font-size: .96rem;
    color: #000000;
    text-align: left;
    margin: .42rem 0 1.3rem 0;
    padding: 0 .6rem 0 .6rem;
}
.main .author_p{
    font-size: .6rem;
    color: #000000;
    text-align: left;
    margin-bottom: 1.4rem;
    padding: 0 0 0 .6rem;
}
.main .conter{
    word-wrap:break-word;
    word-break:break-all;
    overflow: hidden;
    line-height: 1.1rem;
    font-size: .64rem;
    text-align: left;
    padding: .58rem .6rem 2.04rem .6rem;
}
.main .conter>img{
    width: 100% !important;
    height: auto;
}
.main .flollow_box{
    width: 12.3rem;
    height: 5.24rem;
    margin: .9rem auto .44rem auto;
    overflow: hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}
.main .flollow_box .flollow_name{
    margin: 1.8rem 4.48rem 0 .96rem;
    font-size: .96rem;
    font-weight: 600;
    text-align: center;
    overflow: hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    background: linear-gradient(to right,#ffefce,#ffe76e);
    -webkit-background-clip: text;
    color: transparent;
}
.main .flollow_box .flollow_qixian{
    margin: .32rem 4.48rem .28rem .96rem;
    font-size: .4rem;
    font-weight: 500;
    color: #ffe76e;
    text-align: center;
    overflow: hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}
.main .flollow_box .flollow_date{
    margin: 0 4.48rem 0 .96rem;
    font-size: .28rem;
    color: #810404;
    text-align: center;
}
.main .foot{
    width: 100%;
    height: 2.04rem;
    position: fixed;
    bottom: 0;
    left: 0;
    background: #fafafa;
}
.main .foot_status{
    /* position: absolute;
    bottom: 0;
    left: 0; */
}
.main .foot .fl_box{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.main .foot .fl_box .input_box{
    margin-left: .8rem;
    flex: 1;
    padding: 0;

}
.main .foot .fl_box .input_box .input_classbusin  > input{
    display: block;
    width: 100%;
    height: 1.2rem;

}
.main .foot .fl_box .right_default{
    width: 7.4rem;
}
.main .foot .fl_box .right_default .item{
    margin: 0 .66rem;
    display: inline-block;
    position: relative;
}
.main .foot .fl_box .right_default .item .icon_good_icon{
    display: block;
    width: .56rem;
    height: .56rem;
}
.main .foot .fl_box .right_default .item .word_talk_icon{
    display: block;
    width: .66rem;
    height: .66rem;
}
.main .foot .fl_box .right_default .item .share_talk_icon{
    display: block;
    width: .7rem;
    height: .66rem;
}
.main .foot .fl_box .right_default .item .num{
    font-size: .4rem;
    color: #979797;
    position: absolute;
    right: -.8rem;
    top: -.4rem;
}
.main .foot .fl_box .right_action{
    width: 4rem;
}
.main .foot .fl_box .right_action > a{
    display: block;
    width: 2rem;
    margin: 0 auto;
    padding:.2rem;
    border-radius: .2rem;
    color: #ffffff;
    font-size: .56rem;
    background: #363944;

}
.cezhao{
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: #ffffff;
    background-color: #25262d;
    opacity: .8;
    z-index: 99;
}
.cezhao img{
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: auto;
}
.item_follow{
    background: #F8F8F8;
}
</style>
<style lang="stylus" rel="stylesheet/stylus">
.input_classbusin
    .cube-input-field
        padding:0 .26rem 0 .56rem
        height:1.2rem
        border:.04rem solid #cdcdcd
.main
    .conter
        img
            width: 100% !important;
            height: auto;

</style>
